<template>
  <div>
    <el-table :show-header="false"
        highlight-current-row
        @current-change="handleCurrentChange"
        :data="data">
      <el-table-column label="名字" align="left" prop="name" />
    </el-table>

    <el-table :data="indexItemList" default-expand-all height="400px" row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="编号" align="left" prop="itemNo" width="120" />
      <el-table-column label="检查项目" align="left" prop="name" width="160" />
      <el-table-column label="检查要点" align="left" prop="spec" />
      <el-table-column label="检查状态" align="center" width="60">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.checkedStatus"
            :active-value=1
            :inactive-value=0
            @change="handleCheckedChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="存在隐患" align="center" width="60">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.hiddenDanger"
            :active-value=1
            :inactive-value=0
            @change="handleHiddenDangerChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="同步下级" align="center" width="60">
        <template slot-scope="scope">
          <el-switch
            v-if="scope.row.children && scope.row.children.length"
            v-model="scope.row.syncStatus"
            :active-value=1
            :inactive-value=0
            @change="handleSyncStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="附件" align="center"  width="50">
        <template slot-scope="scope">
          <el-button
            style="text-decoration: underline;"
            size="mini"
            type="text"
            @click="handleManage(scope.row)"
          >添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="上传整改报告" center :visible.sync="reportOpen" width="550px" @close="close" append-to-body>
      <el-form ref="form" label-width="80px">
        <el-form-item label="隐患说明">
          <UploadCom ref="upload"
          @submitData="submitReport"
          description="点击选择需要上传的文件"
          :userFileList="fileList"
          class="form_long" />
        </el-form-item>
         <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" rows="3" placeholder="隐患备注" />
         </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancelReport">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateItemHiddenDanger, getTreeTableInfo, addTaskItemFile, getTaskItemFile, listTaskItem, updateItemSyncStatus } from "@/api/labsafety/taskItem";
import UploadCom from "@/views/labdata/commons/upload.vue"
export default {
  name: "TargetItem",
  components: { UploadCom },
  props: {
    data: Array,
    instanceId: Number
  },
  data() {
    return {
      reportOpen: false,
      total: 0,
      currentRow: null,
      form:{},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indexId: null,
        instanceId: null
      },
      itemId: null,
      fileList: [],
      indexItemList: []
    };
  },
  created() {
  },
  methods: {
    handleCurrentChange(row) {
      this.currentRow = row
      listTaskItem({indexId: row.id, instanceId: this.instanceId, status: 0}).then(response => {
        this.indexItemList = this.handleTree(response.rows, "indexItemId");
      })
    },
    getList() {
      getTreeTableInfo(this.instanceId).then(response => {
        this.itemList = response.rows
      })
    },
    handleHiddenDangerChange(row) {
      const data = {
        id: row.id,
        hiddenDanger: row.hiddenDanger
      }
      updateItemHiddenDanger(data)
    },
    handleSyncStatusChange(row) {
      const data = {
        id: row.id,
        syncStatus: row.syncStatus
      }
      updateItemSyncStatus(data).then(response => {
        if (row.syncStatus == 1) {
          this.handleCurrentChange(this.currentRow)
        }
      })
    },
    handleCheckedChange(row){
      const data = {
        id: row.id,
        checkedStatus: row.checkedStatus
      }
      updateItemHiddenDanger(data)
    },
    handleManage(row) {
      this.itemId = row.id
      getTaskItemFile(row.id).then(response => {
        this.form = response.data;
        if(this.form.files && this.form.files.length>0){
          this.fileList = this.form.files;
        }
      })
      this.reportOpen = true
    },
    cancelReport() {
      this.itemId = null
      this.reportOpen = false
      this.form = {}
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["upload"].doSubmit();
    },
    /** 提交报告按钮 */
		submitReport(allFiles) {
      this.form.id = this.itemId;
      this.form.files = allFiles;
			if (allFiles.length > 0) {
				addTaskItemFile(this.form).then(response => {
					this.msgSuccess("保存成功")
          this.reportOpen = false
				});
			} else {
					this.msgError("请先上传文件")
      }
		},
    close() {
      this.fileList = []
      this.itemId = null
      this.form = {};
    }
  }
};
</script>

<style scoped lang="scss">
/* 去掉中间数据的分割线 */
/deep/ .el-table__row > td {
  border: none;
}
/* 去掉上面的线 */
/* .el-table th.is-leaf{
        border: none;
    } */
/* 去掉最下面的那一条线 */
/deep/ .el-table::before {
  height: 0px;
}
/deep/ .el-table .cell {
  line-height: 23px;
}
.form_long{
  width: 70%;
}
</style>
